<template>
  <q-table
      :card-container-style="{ 'overflow': 'auto' }"
      card-container-class="q-pa-sm content-start"
      class="no-border-radius full-height"
      grid
      :rows="tasks"
      :columns="columns"
      row-key="id"
      :filter="filter"
      virtual-scroll
      :rows-per-page-options="[0]"
      :virtual-scroll-sticky-size-start="48"
  >
    <template v-slot:top>
      <NewTask ref="newTask" @refresh="getTask"/>
      <ModifyTask ref="modifyTask" @refresh="getTask"/>
      <div class="flex q-gutter-x-sm items-center full-width">
        <div class="text-h6">任务列表</div>
        <q-space/>
        <template v-if="$q.screen.gt.md">
          <time-date-picker dense outlined v-model="startTime"
                            label="开始时间"/>
          <time-date-picker dense outlined v-model="endTime" label="结束时间"/>
          <q-input dense outlined debounce="300" v-model="filter"
                   placeholder="搜索关键字">
            <template v-slot:append>
              <q-icon name="search"/>
            </template>
          </q-input>
        </template>
        <q-btn v-else color="secondary" icon="event" label="筛选条件">
          <q-menu persistent>
            <div class="q-pa-md">
              <time-date-picker borderless v-model="startTime"
                                label="开始时间"/>
              <q-separator vertical inset="true"/>
              <time-date-picker borderless v-model="endTime" label="结束时间"/>
              <q-separator vertical inset="true"/>
              <q-input borderless dense debounce="300" v-model="filter"
                       placeholder="Search">
                <template v-slot:append>
                  <q-icon name="search"/>
                </template>
              </q-input>
            </div>
          </q-menu>
        </q-btn>
        <q-btn label="新增任务" color="primary" icon="add"
               @click="newTask.show()"/>
      </div>
    </template>
    <template v-slot:item="props">
      <div class="q-pa-sm col-xs-6 col-sm-4 col-md-3">
        <q-card @click="modifyTask.show(props.row)">
          <q-card-section class="text-h6">{{
              props.row.device || '未分配机器人'
            }}
          </q-card-section>
          <q-separator/>
          <q-item dense v-for="item in columns" v-bind:key="item.key" clickable
                  v-ripple>
            <q-item-section>{{ item.title }}</q-item-section>
            <q-item-section side>{{ props.row[item.key] }}</q-item-section>
          </q-item>
        </q-card>
      </div>
    </template>
<!--    <template v-slot:no-data>-->
<!--      <div-->
<!--          class="full-width full-height row flex-center q-gutter-sm q-pb-xl text-h4 text-grey-7 content-center justify-center">-->
<!--        <q-icon size="10rem" name="sentiment_dissatisfied"/>-->
<!--        <div class="text-center full-width">-->
<!--          当前范围内没有可以显示的运输任务-->
<!--        </div>-->
<!--      </div>-->
<!--    </template>-->
  </q-table>
</template>

<script setup>
import { useAPIStore } from 'stores/api'
import { ref, watch } from 'vue'
import { api } from 'boot/axios'

import NewTask from 'components/transport/task/NewTask.vue'
import ModifyTask from 'components/transport/task/ModifyTask.vue'
import TimeDatePicker from 'components/common/TimeDatePicker.vue'

const modifyTask = ref()
const newTask = ref()
const filter = ref('')
const columns = [
  {
    title: '创建时间',
    key: 'createTime'
  },
  {
    title: '任务状态',
    key: 'status'
  }
]
const startTime = ref('')
const endTime = ref('')
const tasks = ref([])

watch(startTime, value => {
  if (value !== '' && endTime.value !== '') getTask()
})
watch(endTime, value => {
  if (value !== '' && startTime.value !== '') getTask()
})

function getTask () {
  const params = {
    startTime: startTime.value,
    endTime: endTime.value
  }
  api.get(useAPIStore().orderUrl + 'task', { params }).then(rs => {
    tasks.value = rs.data
  })
}

function setDate () {
  const curTime = new Date()
  const date = new Date(curTime.setMinutes(curTime.getMinutes() + 10))
  const year = date.getFullYear() // 年
  let month = date.getMonth() + 1 // 月
  let day = date.getDate() // 日
  let hour = date.getHours() // 时
  let minute = date.getMinutes() // 分
  hour = hour < 10 ? '0' + hour : hour
  month = month < 10 ? '0' + month : month
  day = day < 10 ? '0' + day : day
  minute = minute < 10 ? '0' + minute : minute
  startTime.value = year + '-' + month + '-01 00:00'
  setTimeout(() => {
    endTime.value = year + '-' + month + '-' + day + ' ' + hour + ':' + minute
  }, 50)
}

setDate()

</script>
